<template>
    <div class="NoticeComponent">
        <div class="info">
            <img :src="notice.headimg" alt="">
            <div class="userInfo">
                <div class="name">{{notice.nickname}}</div>
                <div class="date">{{notice.createDate}}</div>
                <div class="lsz">浏览：{{notice.browseNum}} 收藏：{{notice.collectionNum}} 转发：{{notice.forwardNum}}</div>
                <div class="lsz">状态：{{notice.statusStr}}</div>
            </div>
        </div>
        <div class="content">
            <a href="#" title="">#{{notice.category.name}}#</a>
            {{notice.content}} 
        </div>
        <div class="imgs" >
            <img :src="item" alt="" v-for="(item,index) of imgs" :key="index">
        </div>
        <div class="status" v-if="notice.priceId!=null">
            已置顶
        </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'NoticeComponent',
    props: {
		notice:Object
    },
    data() {
        return {
			
        }
    },
	computed:{
		imgs() {
			if(this.notice.img!=null && this.notice.img.trim()!='') {
				return this.notice.img.split(',')
			}
			
			return []
		}
	},
    methods: {

    }
}
</script>
<style scoped lang="styl">
.NoticeComponent{
    position: relative;
}
.info
    display flex;
    img
        width 60px
        height 60px
        border-radius 50%
    .userInfo
        flex 1
        margin-left 15px
        font-size 14px
        color #888
        .name 
            font-weight blod
            font-size 18px
            color #333
.content
    margin-top 15px
.imgs
    display flex
    flex-wrap wrap
    margin-top 8px
    img
        width 80px
        height 80px
        margin 5px

.status{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    padding: 5px 10px; 
    background: #e6a23c;
    border-radius: 10px;
    font-size: 12px;
}
</style>